import React, { Component } from 'react'
import { Carousel } from 'antd-mobile';

class Com extends Component { 
  state = {
    flag: false
  }
  componentDidUpdate (nextProps) { // 能够监测到数据发生了改变
    // console.log(nextProps.bannerlist === this.props.bannerlist)
    // 实际上相当于 判断了轮播图列表的长度为0时的状态
    // if (nextProps.bannerlist !== this.props.bannerlist) {
    //   this.setState({
    //     flag: true
    //   })
    // }
    if (this.state.flag) {
      return
    }
    if (this.props.bannerlist.length !== 0) {
      this.setState({flag: true})
    }
  }
  render () {
    const { bannerlist } = this.props
    return (
      <Carousel 
        autoplay = { this.state.flag }
        infinite
        dotStyle={{ width: '0.08rem', height: '0.08rem', backgroundColor: 'rgba(255,255,255,1)'}}
      > 
        { bannerlist.map(item => (
          <a
            key={item}
            href="http://www.alipay.com"
            style={{ display: 'inline-block', width: '100%' ,height: '1.4rem'}}
          >
            <img
              src={ item }
              alt=""
              style={{ width: '100%', verticalAlign: 'top',height: '1.4rem' }}
            />
          </a>
        ))}
      </Carousel>
    )
  }
}

export default Com
